<template>
  <div class="about">
    <h1>添加成绩</h1>
    <form action="">
      <div>
        <label>姓名:</label>
        <input type="text" placeholder="输入学生姓名"  />
      </div>
      <div>
        <label>语文:</label>
        <input type="text" placeholder="输入语文成绩" v-model="chinese"/>
      </div>
      <div>
        <label>数学:</label>
        <input type="text" placeholder="输入数学成绩" v-model="math"/>
      </div>
      <div>
        <label>化学:</label>
        <input type="text" placeholder="输入化学成绩" v-model="chemistry"/>
      </div>
      <div>
        <label>历史:</label>
        <input type="text" placeholder="输入历史成绩" v-model="history"/>
      </div>
      <button>添加学生</button>
    </form>
    <h1>web一班学生成绩</h1>
    <students :data-list="student_data" :table-list="title" @set-num="getNum" />
    <h1 v-show="'name' in item_data">
      你当前预览的是:{{ item_data.name }}的成绩
    </h1>
    <div>
      <ul>
        <li v-for="(item1, index1) in item_data.data" :key="index1">
          {{ index1 + 1 }}---------{{ item1.title }}-----------{{
            item1.num
          }}-------{{ item1.num | numDtr }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import students from "../components/grades.vue";
export default {
  data() {
    return {
      title: ["序号", "姓名", "语文", "数学", "化学", "历史", "操作"],
      student_data: [
        {
          name: "小陈",
          data: [
            {
              title: "语文",
              num: 40,
            },
            {
              title: "数学",
              num: 70,
            },
            {
              title: "化学",
              num: 80,
            },
            {
              title: "历史",
              num: 90,
            },
          ],
        },
        {
          name: "小王",
          data: [
            {
              title: "语文",
              num: 80,
            },
            {
              title: "数学",
              num: 50,
            },
            {
              title: "化学",
              num: 90,
            },
            {
              title: "历史",
              num: 90,
            },
          ],
        },
        {
          name: "小红",
          data: [
            {
              title: "语文",
              num: 70,
            },
            {
              title: "数学",
              num: 77,
            },
            {
              title: "化学",
              num: 88,
            },
            {
              title: "历史",
              num: 78,
            },
          ],
        },
        {
          name: "小张",
          data: [
            {
              title: "语文",
              num: 89,
            },
            {
              title: "数学",
              num: 71,
            },
            {
              title: "化学",
              num: 60,
            },
            {
              title: "历史",
              num: 54,
            },
          ],
        },
      ],
      item_data: {},
      chinese:'',
      math:'',
      chemistry:'',
      history:''
    };
  },
  methods: {
    getNum(arge) {
      console.log(arge);
      this.item_data = arge;
    },
  },
  components: {
    students,
  },
  filters: {
    numDtr(data) {
      if (data >= 90) {
        return "优秀";
      } else if (data >= 70) {
        return "良好";
      } else if (data >= 60) {
        return "及格";
      } else {
        return "不及格";
      }
    },
  },
};
</script>

<style>
h1{
  font-size: 16px;
}
ul {
  list-style: none;
}
input{
   outline: none;
   padding: 10px 6px;
   margin-bottom: 5px;
   border: 1px solid rgb(238, 238, 238);
}
input:focus{
   border: 1px solid  rgb(91, 222, 121)
}
</style>
